<template>
  <div class="app-container">
    <el-form ref="elForm" :disabled="$route.query.isInfo" :model="formData" :rules="rules" size="medium"
      label-width="120px">
      <h2 style="text-align: center">出车记录</h2>
      <h4 class="form-header h4">基本信息</h4>
      <div class="table">
        <el-form-item label="" prop="form" style="margin-left: 0" label-width="0">
          <el-button type="primary" plain size="mini" @click="handleAddBox" v-if="!formData.carOutId">增行</el-button>
          <!-- <el-button type="danger" plain size="mini" @click="handleDeleBox">删行</el-button> -->
          <!-- {{ formData.certItemBos }} -->
          <el-table :data="formData.certItemBos" :border="true" style="width: 100%; ">
            <el-table-column width="180" label="出车编号" align="center">
              <template slot-scope="scope">
                <el-form-item label-width="0" :prop="`certItemBos.${scope.$index}.code`" :rules="rules.code">
                  <el-input v-model="scope.row.code" placeholder="保存后自动生成" :disabled="true" clearable
                    :style="{ width: '100%' }"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column width="480" label="出车事由" align="center">
              <template slot-scope="scope">
                <el-form-item label-width="0" :prop="`certItemBos.${scope.$index}.remark`" :rules="rules.remark">
                  <el-input type="textarea" v-model="scope.row.remark" placeholder="出车事由" clearable
                    :style="{ width: '100%' }"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column width="180" label="选择车辆" align="center">
              <template slot-scope="scope">
                <el-form-item label-width="0" :prop="`certItemBos.${scope.$index}.id`" :rules="rules.id">
                  <el-select filterable multiple v-model="scope.row.id" placeholder="请选择选择车辆" clearable
                    @change="changeCar($event, scope.$index)" :style="{ width: '100%' }">
                    <el-option v-for="(item, index) in carSelectList" :key="index" :label="item.licenseNum"
                      :value="item.carId" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column width="180" label="驾驶员" align="center">
              <template slot-scope="scope">
                <el-form-item label-width="0" :prop="`certItemBos.${scope.$index}.nickName`" :rules="rules.nickName">
                  <!-- <el-input v-model="scope.row.nickName" placeholder="请输入驾驶员" clearable
                    :style="{ width: '100%' }"></el-input> -->
                  <el-select filterable multiple v-model="scope.row.name" placeholder="请选择驾驶员" clearable value-key="value"
                    @change="changeCarNamenick($event, scope.$index)" :style="{ width: '100%' }">
                    <el-option v-for="(item, index) in selList" :key="index" :label="item.label"
                      :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column width="180" label="出车时间" align="center">
              <template slot-scope="scope">
                <el-form-item label-width="0" :prop="`certItemBos.${scope.$index}.outTime`" :rules="rules.outTime">
                  <el-date-picker v-model="scope.row.outTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                    :style="{ width: '100%' }" placeholder="请选择出车时间" clearable></el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="附件" align="center">
              <template slot-scope="scope">
                <el-form-item label-width="0" :prop="`certItemBos.${scope.$index}.oss`" :rules="rules.oss">
                  <!-- <FileUpload v-model="scope.row.oss"></FileUpload> -->
                  <FileUploadBase :isDelete="!$route.query.isInfo" v-model="scope.row.oss"></FileUploadBase>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column width="150" label="删除" align="center" v-if="!formData.carOutId">
              <template slot-scope="scope">
                <el-button type="danger" plain size="mini" @click="handleDeleBox(scope.$index)">删行</el-button>
              </template>
            </el-table-column>

          </el-table>
        </el-form-item>
      </div>
      <!-- <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="出车编号" prop="code">
            <el-input
              v-model="formData.code"
              placeholder="保存后自动生成"
              :disabled="true"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出车主题" prop="title">
            <el-input
              v-model="formData.title"
              placeholder="请输入出车主题"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="选择车辆" prop="carId">
            <el-select
              filterable
              v-model="formData.carId"
              placeholder="请选择选择车辆"
              clearable
              @change="changeCar"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in carSelectList"
                :key="index"
                :label="item.licenseNum"
                :value="item.carId"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆类型" prop="driverTypeName">
            <el-input
              v-model="formData.driverTypeName"
              placeholder="请输入车辆类型"
              :disabled="true"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="品牌" prop="brand">
            <el-input
              v-model="formData.brand"
              placeholder="请输入品牌"
              :disabled="true"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="驾驶员" prop="driverId">
            <el-input
              v-model="formData.nickName"
              placeholder="请输入驾驶员"
              :disabled="true"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出发时间" prop="startTime">
            <el-date-picker
              v-model="formData.startTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择出发时间"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="返回时间" prop="endTime">
            <el-date-picker
              v-model="formData.endTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择返回时间"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="用车人" prop="operUserId">
            <UserDialog
              @change="changeUser"
              v-model="formData.operUserId"
            ></UserDialog>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="部门名称" prop="deptName">
            <el-input
              v-model="formData.deptName"
              placeholder="请输入部门名称"
              :disabled="true"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="目的地" prop="targetAddress">
            <el-input
              v-model="formData.targetAddress"
              placeholder="请输入目的地"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="公里数" prop="distance">
            <el-input-number
              v-model="formData.distance"
              placeholder="公里数"
              :step="1"
              :style="{ width: '100%' }"
              controls-position="right"
            >
            </el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="用途" prop="remark">
        <el-input
          v-model="formData.remark"
          type="textarea"
          placeholder="请输入用途"
          :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item> -->
      <!-- <h4 class="form-header h4">附件信息</h4>
      <el-form-item label="" prop="oss">
        <FileUploadBase :isDelete="!$route.query.isInfo" v-model="formData.oss"></FileUploadBase>
      </el-form-item> -->

      <el-col :span="24">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button v-if="!$route.query.isInfo" type="primary" @click="submitForm">提交</el-button>
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import { carOutAdd, updategcarOut, carOutInfo, insertBatch } from "@/api/car/carOut.js";
import { selectList as carSelect } from "@/api/car/car.js";
import { convertCurrency } from "@/utils/ruoyi.js";
import { selectList } from "@/api/car/driver.js";
export default {
  components: {},
  props: [],
  data() {
    return {
      carSelectList: [],
      formData: {
        certItemBos: [
          {
            oss: undefined,
            contractCategoryValue: undefined,
            contractTypeValue: undefined,
            contractNo: undefined,
            userId: undefined,
            contractCategoryValue: undefined,
            contractName: undefined,
            contractTypeValue: undefined,
            contractAttValue: undefined,
            isApplyValue: undefined,
            statusValue: undefined,
            periodYearValue: undefined,
            tryMonthNum: undefined,
            tryMoney: undefined,
            officialMoney: undefined,
            signData: null,
            startDate: null,
            endDate: null,
            tryEndDate: null,
            preEndDate: null,
            remindUserId: undefined,
            driverId: undefined,
            outTime: "",
            remark: ""
          }
        ]
      },
      rules: {
        code: [],
        distance: [
          {
            required: true,
            message: "请输入行车公里数",
            trigger: "change",
          },
        ],
        targetAddress: [
          {
            required: true,
            message: "请输入目的地",
            trigger: "change",
          },
        ],
        remark: [
          {
            required: true,
            message: "请输入用途",
            trigger: "blur",
          },
        ],

        title: [
          {
            required: true,
            message: "请输入出车主题",
            trigger: "blur",
          },
        ],
        id: [
          {
            required: true,
            message: "请选择选择车辆",
            trigger: "blur",
          },
        ],
        driverTypeName: [
          {
            required: true,
            message: "请输入车辆类型",
            trigger: "blur",
          },
        ],
        brand: [
          {
            required: true,
            message: "请输入品牌",
            trigger: "blur",
          },
        ],
        driverId: [
          {
            required: true,
            message: "请选择驾驶员",
            trigger: "change",
          },
        ],
        startTime: [
          {
            required: true,
            message: "请选择出发时间",
            trigger: "change",
          },
        ],
        endTime: [
          {
            required: true,
            message: "请选择返回时间",
            trigger: "change",
          },
        ],
        operUserId: [
          {
            required: true,
            message: "请选择出车人",
            trigger: "change",
          },
        ],
        deptName: [
          {
            required: true,
            message: "请输入部门名称",
            trigger: "blur",
          },
        ],
        fee: [
          {
            required: true,
            message: "出车费用",
            trigger: "blur",
          },
        ],
        chineseFee: [
          {
            required: true,
            message: "请输入金额大写",
            trigger: "blur",
          },
        ],
        oss: [
          {
            required: false,
            message: "附件不能为空",
            trigger: "change",
          },
        ],
      },
      selList: []
    };
  },
  computed: {},
  watch: {
    "formData.fee": {
      deep: true,
      handler: function (newVal, oldVal) {
        this.formData.chineseFee = convertCurrency(newVal);
      },
    },
  },
  created() {
    this.carSelect();
    this.selectList()
    if (this.$route.query.isEdit || this.$route.query.isInfo) {
      this.getinfo();
    }
  },
  mounted() { },
  methods: {
    selectList() {
      selectList().then((res) => {
        let arr = []
        res.data.forEach((item) => {
          const obj = {}
          obj.value = item.driverId
          obj.label = item.nickName
          arr.push(obj)
        })
        console.log(arr);
        this.selList = arr
      })
    },
    handleAddBox() {
      this.formData.certItemBos.push({
        oss: undefined,
        contractCategoryValue: undefined,
        contractTypeValue: undefined
      });
    },
    handleDeleBox(e) {
      if (this.formData.certItemBos.length == 1) return;
      this.formData.certItemBos.splice(e, 1);
    },
    changeCar(i, v) {
      console.log(i, v);
      console.log(this.carSelectList);
      // let row = this.carSelectList.find((e) => e.carId == i);
      let licenseNum = []
      let carId = []
      this.carSelectList.forEach((item, index) => {
        console.log(item.carId, i);
        if (item.carId == i[index]) {
          licenseNum.push(item.licenseNum)
          carId.push(item.carId)
        }
      })
      this.formData.certItemBos[v].carId = carId.toString();
      this.formData.certItemBos[v].licenseNum = licenseNum.toString()
      console.log(this.formData.certItemBos);
    },
    changeCarNamenick(i, v) {
      console.log(i, v);
      let nickName = []
      let driverId = []
      nickName.push(i[0].label)
      driverId.push(i[0].value)
      this.formData.certItemBos[v].driverId = driverId.toString()
      this.formData.certItemBos[v].nickName = nickName.toString()
      // let row = this.selList.find((e) => e.label == i[0]);
      // console.log(row);
      // if (row) {
      //   this.formData.certItemBos[v].driverId = row.driverId;
      //   this.formData.certItemBos[v].nickName = row.nickName;
      // } else {
      //   this.formData.certItemBos[v].driverId = undefined;
      //   this.formData.certItemBos[v].nickName = undefined;
      // }
      console.log(this.formData.certItemBos);
    },
    carSelect() {
      carSelect().then((response) => {
        this.carSelectList = response.data;
      });
    },
    changeUser(e) {
      console.log(e);
      this.formData.operUserName = e.nickName;
      this.formData.deptName = e.dept?.deptName;
      this.formData.deptId = e.dept?.deptId;
    },
    getinfo() {
      carOutInfo(this.$route.query.id).then((response) => {
        this.formData = response.data;
        this.formData.certItemBos = []
        let obj = {}
        obj.code = this.formData.code
        obj.remark = this.formData.remark
        obj.carId = this.formData.carId
        obj.nickName = this.formData.nickName
        obj.oss = this.formData.oss
        obj.id = (this.formData.carId.split(',')).map(Number)
        obj.name = this.formData.nickName.split(',')
        obj.outTime = this.formData.outTime
        this.formData.certItemBos.push(obj);
        console.log(this.formData.certItemBos);
      });
    },

    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));

          if (this.formData.carOutId != undefined) {
            query.licenseNum = this.formData.certItemBos[0].licenseNum
            query.remark = this.formData.certItemBos[0].remark
            query.code = this.formData.certItemBos[0].code
            query.carId = this.formData.certItemBos[0].carId
            updategcarOut(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            insertBatch(query.certItemBos).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      const obj = { path: "./record" };
      this.$tab.closeOpenPage(obj);
    },
  },
};
</script>
